<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    div {
      width: 100px;
      height: 100px;
      background-color: #ccc;
      position: relative;
      left: 0;
    }
  </style>
</head>
<body>
  <div></div>
  <script>
    function interval(callback, delay = 20) {
      let id = setInterval(()=>callback(id),delay)
    }
    interval((timeId)=>{
      var div = document.querySelector('div')
      
      let left = parseInt(div.offsetLeft)
      div.style.left = left + 1 + 'px'
      if (left>=300) {
        clearInterval(timeId)
        interval((timeId)=>{
          let left = parseInt(div.offsetLeft)
          let width = div.offsetWidth
          console.log(div.offsetWidth);
          div.style.width = width - 3 + 'px'
          div.style.left = left + 3 + 'px'
          if (width <= 10) {
            clearInterval(timeId)
          }

          
        },100)
      }
    })
  </script>
</body>
</html>